<template>
  <div style="background-color:">
    <!-- 轮播图 -->
    <div class="dash">
      <el-carousel style="height:600px" arrow="hover">
        <el-carousel-item
          v-for="item in swiperList"
          :key="item"
          style="height:600px"
        >
          <img :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 毕业数据 -->

    <div>
      <ul>
        <table class="table_size">
          <thead>
            <tr>
              <td>
                <div>姓名</div>
                <div>城市</div>
                <div>公司</div>
                <div>薪资</div>
              </td>
            </tr>
          </thead>

          <tbody>
            <td>
              <!-- :class-option="optionHover" -->
              <vue-seamless-scroll :data="student_list" class="seamless-warp">
                <ul class="item">
                  <li v-for="(item, index) in student_list" :key="index">
                    <span>{{ item.name }}</span>
                    <span>{{ item.city }}</span>
                    <span>{{ item.company }}</span>
                    <span>{{ item.salary }}</span>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </td>
          </tbody>
        </table>
      </ul>
    </div>

    <!-- 底部 -->
    <div class="dddd">
      <p>
        Copyright ©2014 版权所有 河南慧点信息科技有限公司
        <a href="https://beian.miit.gov.cn" target="_blank"
          >ICP备案：豫ICP备19031280</a
        >
      </p>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import aaa from "../../assets/img/1.png";
import bbb from "../../assets/img/2.jpg";
import ccc from "../../assets/img/3.png";
// import images from '@static/images/1.jpg'
export default {
  name: "dashboard",
  components: {
    Swiper,
    SwiperSlide,
  },
  // data:{
  //    images:{
  //        one:'C:\Users\DELL\Desktop\one_subject\CRM\static\images\1.jpg'
  //    }
  // },
  data() {
    return {
      swiperList: [
        aaa,
        bbb,
        ccc,

        // 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        // 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ],
      student_list: [],
    };
  },

  //表格接受数据
  mounted() {
    var that = this;
    this.axios("http://192.168.2.225:8080/com.huidian.rem/Graduation").then(
      function(res) {
        that.list = res.data;
        console.log(that.list);
        that.student_list = that.list;
      }
    );
  },
};
</script>

<style lang="less" scoped>
img {
  width: 80%;
  // margin: 0 auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.dddd {
  text-align: center;
  // border-top: 1px black  solid;
  background-color: rgb(200, 200, 200);
}

//设置第一行的数据
.table_size {
  margin: auto;
  text-align: center;
  font-size: 30px;
  border-collapse: collapse;
  thead {
    tr {
      td {
        width: 1000px;
        background-color: rgb(61, 109, 249);
        div {
          width: 20%;
          border: 25px solid;
          border-color: rgb(61, 109, 249);
          background-color: rgb(61, 109, 249);
          white-space: nowrap;
          display: inline-block;
          color: white;
        }
      }
    }
  }
  tbody {
    td {
      .seamless-warp {
        height: 500px;
        overflow: hidden;
        .item li {
          height: 50px;
          display: flex;
          span {
            flex: 1;
            text-align: center;
            line-height: 50px;
            color: black;
            margin: 0 20px;
            font-size: 20px;
            width: 100px;
            overflow: hidden;
          }
        }
      }
    }
  }
}

//设置滚动
</style>
